#create custom helper in handlebars

[topjavatutorial-blog]

Handlebars.js - Creating Custom Helpers

Handlebars.js – Creating Custom Helpers

Handlebars Helpers Helpers in Handlebars.js are reusable functions that can be added to data to change its behavior in some way. Handlebars provides several built-in helpers such as if, each, unless etc. (For built-in helper, refer http://handlebarsjs.com/builtin_helpers.html)   Creating custom Handlebars Helpers We can create our own helper functions in Handlebars using the registerHelper()…

[toddbirchard-architect]

Handlebars Templating in ExpressJS

Node for Noobs

Writing HTML sucks, thus we should do everything to minimize this aspect of development where possible. Enter Handlebars , a savior to those who hate repetitive code (and percentage signs). If you do any sort of development work, you're probably familiar with Handlebars. I thought I was, but it isn't until we need to start a new project from scratch that we realize that we totally forgot the configuration process we took last time. That's why I'm here. Let's have a quick refresher on the parts that make up Handlebars Layouts are the most ambiguous high-level layer; these are commonly used to set underlying page metadata as well as general layout (for lack of a better term). Pages are templates which equate to one type of page. For example, the 'post' page on this site is unique from, say, the homepage. Because all posts share elements with one another, hundreds of posts share this same template. Partials are snippets which can be shared between pages, such as navigation. A Context is content which is passed to templates and result in being the page's content Helpers are the closest we get to logic in Handlebars: these allow us to display or omit content based on conditionals such as if statements. For example: showing an author's avatar only if they have uploaded an image. Project Setup We're going to use the Express /views folder to contain all of our handlebars goodness. Our project should look something like this: myapp ├── bin ├── build ├── routes ├── src ├── views │ ├── layouts/ │ ├── partials/ │ └── error.hbs │ └── index.hbs │ └── login.hbs │ └── etc └── README.md └── app.js └── package.json It's important to distinguish that we've separated our views folder into three classifications for layouts , partials , and pages , where pages occupy the root /views directory. It's important to keep this distinction as our structure affects how we serve up these templates. Configure that Ish Install handlebars: npm install handlebars --save Crack open your app.js file or whatever it is you call that thing. Require handlebars: var hbs = require( 'express-handlebars'); Next we'll configure Express to use Handlebars as the view engine, and tell Express where to find these files: // view engine setup app.set('view engine', 'hbs'); app.engine( 'hbs', hbs( { extname: 'hbs', defaultView: 'default', layoutsDir: __dirname + '/views/pages/', partialsDir: __dirname + '/views/partials/' })); Express assumes by default that we're storing our views in the '/views' folder, which we are. We take this a step further by specifying which subfolders our partials and layouts are in above. We can save pages directly in /views . Notice that we're also setting a default layout. We can override this in our routes if needed, but setting a default layout is useful for loading pages in an html wrapper container page metadata. Kicks on Route 66 Let's create our first route in routes/index.js . We're going to load a view called home into a layout called default : var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('home', {layout: 'default', template: 'home-template'}); }); This will render views/home.hbs into views/layouts/default.hbs , provided are views are set up correctly. We also pass a custom value template which is user-defined; more on that below. Basic Usage Let's finally take a look at our actual Handlebars views. Here's default.hbs :

Best Website

We have three values here: and , and . is a value with double brackets, thus is expecting linear data. We passed template in our route: this sets the body class to equal home-template on the chance that we'll want to apply page-specific styles or logic in the future. is rocking the triple brackets, and is reserved specifically to serve this purpose: loading templates into other templates. Lastly we have . This will load a partial named footer from views/partials/footer.hbs , provided that we create it. The difference between how and are being loaded have to do with a general workflow philosophy; pages are the main event and thus are loaded into layouts by their command. Partials can be called by pages at will whenever we please. There's obviously a lot more to Handlebars- the fun doesn't truly begin until we pull dynamic values from databases or wherever. We'll get there.

- Todd Birchard Read post

[hackersandslackers]

Handlebars Templating in ExpressJS

Node for Noobs

Writing HTML sucks, thus we should do everything to minimize this aspect of development where possible. Enter Handlebars , a savior to those who hate repetitive code (and percentage signs). If you do any sort of development work, you're probably familiar with Handlebars. I thought I was, but it isn't until we need to start a new project from scratch that we realize that we totally forgot the configuration process we took last time. That's why I'm here. Let's have a quick refresher on the parts that make up Handlebars Layouts are the most ambiguous high-level layer; these are commonly used to set underlying page metadata as well as general layout (for lack of a better term). Pages are templates which equate to one type of page. For example, the 'post' page on this site is unique from, say, the homepage. Because all posts share elements with one another, hundreds of posts share this same template. Partials are snippets which can be shared between pages, such as navigation. A Context is content which is passed to templates and result in being the page's content Helpers are the closest we get to logic in Handlebars: these allow us to display or omit content based on conditionals such as if statements. For example: showing an author's avatar only if they have uploaded an image. Project Setup We're going to use the Express /views folder to contain all of our handlebars goodness. Our project should look something like this: myapp ├── bin ├── build ├── routes ├── src ├── views │ ├── layouts/ │ ├── partials/ │ └── error.hbs │ └── index.hbs │ └── login.hbs │ └── etc └── README.md └── app.js └── package.json It's important to distinguish that we've separated our views folder into three classifications for layouts , partials , and pages , where pages occupy the root /views directory. It's important to keep this distinction as our structure affects how we serve up these templates. Configure that Ish Install handlebars: npm install handlebars --save Crack open your app.js file or whatever it is you call that thing. Require handlebars: var hbs = require( 'express-handlebars'); Next we'll configure Express to use Handlebars as the view engine, and tell Express where to find these files: // view engine setup app.set('view engine', 'hbs'); app.engine( 'hbs', hbs( { extname: 'hbs', defaultView: 'default', layoutsDir: __dirname + '/views/pages/', partialsDir: __dirname + '/views/partials/' })); Express assumes by default that we're storing our views in the '/views' folder, which we are. We take this a step further by specifying which subfolders our partials and layouts are in above. We can save pages directly in /views . Notice that we're also setting a default layout. We can override this in our routes if needed, but setting a default layout is useful for loading pages in an html wrapper container page metadata. Kicks on Route 66 Let's create our first route in routes/index.js . We're going to load a view called home into a layout called default : var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('home', {layout: 'default', template: 'home-template'}); }); This will render views/home.hbs into views/layouts/default.hbs , provided are views are set up correctly. We also pass a custom value template which is user-defined; more on that below. Basic Usage Let's finally take a look at our actual Handlebars views. Here's default.hbs : Best Website

We have three values here: and , and . is a value with double brackets, thus is expecting linear data. We passed template in our route: this sets the body class to equal home-template on the chance that we'll want to apply page-specific styles or logic in the future. is rocking the triple brackets, and is reserved specifically to serve this purpose: loading templates into other templates. Lastly we have . This will load a partial named footer from views/partials/footer.hbs , provided that we create it. The difference between how and are being loaded have to do with a general workflow philosophy; pages are the main event and thus are loaded into layouts by their command. Partials can be called by pages at will whenever we please. There's obviously a lot more to Handlebars- the fun doesn't truly begin until we pull dynamic values from databases or wherever. We'll get there.

- Todd Birchard

[womensadventuremagazine]

WordPress CMS Verses Craft CMS

Any web developer who has been working in the industry for more than a few days has probably heard of WordPress. Stay for a couple more months and there’s a good chance you’ve worked on a WordPress site– it’s a popular platform since it’s well-known, easy-to-use, and free.

Craft is a small CMS that was developed fairly recently by ExpressionEngine add-on developers Pixel & Tonic. Having worked with ExpressionEngine for a while, it’s obvious these guys really know the pain-points in any client-facing CMS. Everything they’ve built into Craft solves a problem I’ve had on almost every site I ever made with WordPress. If I had to make a CMS myself, it would probably resemble Craft pretty closely.

You may have also heard of ExpressionEngine, Drupal, Joomla, and a few other CMS heavy-hitters. They all have their benefits and flaws, which is a topic for another time. I ‘d rather talk about the next up-and-comer and my new favorite, Craft.

How does Craft stack up against the industry go-to?

The Good

Craft is like WordPress if it was stripped naked and then clothed in Advanced Custom Fields

Craft, on the other hand, starts with just the basic building blocks and minimal defaults. The Sections and Fields it does provide let you build up your content types and inputs to get to the custom dashboard you want. I would even say it takes less time to build Craft up to WordPress status than it does to fight with WordPress settings to take out all of those Blog-centric things you don’t need.

Another win for Craft is that its Fields build your content interface in much the same way as WordPress’s Advanced Custom Fields plugin (a must-have tool with WordPress in my book), but without downloading and installing another piece.

WordPress strives to give its users as much as possible out-of-the-box, whether that user is a novice blogger or a talented developer who needs a good admin panel. The result is often too much functionality, which forces developers to strip out or disable features to meet the needs of your very custom website (like Comments or the Links Manager, pre WordPress 3.5).

Building instead of Manipulating

There is no API to coerce into the markup that you want and there is no lazy settling for the default because there is no default. As the O.C.D., semantic-obsessed front-end developer that I am, this is perfect. I set all my own HTML (with Twig templates in Craft), styles, and attributes from scratch. <3.

One thing that is a recurring pain to work around in WordPress is its lack of relationships between Post Types. If one Post Type needs to be related to another Post Type, you have to make some middle-man taxonomy or category to relate them, do some PHP magic to make your own custom inputs in the post editing screen, or find a plugin that meets your need. With Craft, Entries (the Crafty brother to Posts) are easily related with a simple Field type. Drag, drop, done. Hallelujah!

One other great client-serving feature of Craft is its handy Matrices. With Matrices, you can set up your interface in Blocks, which your client can then use to build their page– it’s a win-win-win for clients, designers, and developers. Clients can control the order of their well-designed content without hacks or careful content input into a catch-all Editor; designers can rest assured that their designs won’t be fouled-up by user error; and developers have complete control over the mark-up which is generated by these blocks.

This difference in the platforms’ philosophies is apparent in their templating tools. WordPress supplies and spits out a lot of its own default HTML that requires manipulation of the API to change. Craft comes with nothing. No HTML at all. Which is glorious.

A Common Example: Say a non-profit site has a Section of “Social Causes” pages and they want all of their News and information to be categorized by and related to these Causes. Creating those relationships is far more difficult in WordPress.

Relationships are Hard.

Welcome to the Matrix.

In comparison, WordPress can do repeating blocks of the same content in a row. Not too bad. The catch is that you need Advanced Custom Fields, plus their Repeater Field addition which, unlike the main plugin, does cost a few bucks.

Less PHP! And More PHP! Wat?

You will find PHP in Craft’s plugins. Since Craft does not have Themes, there really isn’t anywhere to put your common template helpers and useful functions. Instead, be prepared to write your own Plugin to add what you need. Gone are the days of plopping in a random PHP function into functions.php. This is great since your site is then based off of good modular code and proper PHP Classes, but you may need to read up a bit to get there.

This last “Good” point is relative to the type of developer you are, so I admit this could easily go in the “Bad” section. Craft is built off of PHP like WordPress, Craft uses Twig templates. This is great for front-end developers already familiar with other templating languages like Handlebars or Liquid, but may not be for all you PHP gurus. I personally like the change, since loops feel a little less clunky and the data syntax is closer to JavaScript.

How Does It Look?

Caption: Lawbar – Wellington Lawyers

The Bad.

As Apple found out the hard way, it can be tough to beat the big dog in the market. WordPress has been around longer, has more resources, and has more developers actively contributing to it. If you hit an issue with Craft, resources are few. I’m sure the Craft community will catch up, but in the mean time I recommend making a few new Twitter friends. @Craftcms, the folks from Pixel & Tonic themselves, and Viget’s own Trevor Davis are good follows. Those passionate about Craft are happy to answer questions.

Google Maps vs. Apple Maps.

Craft? Crafts? Kraft? Minecraft?

I search “Craft CMS” for the best results and include “Twig” if it’s a templating problem.

Craft picked a pretty tough name in the Googleverse. Searching for common problems becomes a real chore, simply because you have to sort through 50 articles about Minecraft before getting to the few sources that are available. Compare that to WordPress results, which will stretch for pages and probably include at least five well-written solutions to your problem on Stack Overflow.

The Deal-breaker.

One obstacle for some clients when it comes to Craft is the price. One can’t help but second guess the choice to throw down $299 when the usual go-to CMS is FREE. It’s not such a tough sell on the agency level since clients have usually come prepared to spend much larger sums, but freelancers might have a harder time justifying the cost. Even so, I recommend you try– it’s a one-time fee that then unlocks all of Craft’s best features and goes toward the support and further development of the system.

For good reason, Pixel & Tonic have restricted Craft’s Matrix a bit. Some things I would love to see in future releases:.

Can I get both Pills? The Matrix + Inception.

Re-using Blocks: I ‘d like to use already made Fields or sets of Fields inside Matrix blocks. If the same ��module” exists both inside and outside of my Matrix, keeping the data the same requires careful duplication.

Matrix Inception: Please?

from WordPress http://ift.tt/2joP14v via IFTTT